<template>
    <div class="first">
        <a href="https://gitee.com/snowy-mountains-can-be-seen/vue-todo">Git仓库</a>
        <p class="more"  @mousemove="moreData" @mouseout="hiddenData" id="more">更多</p>
        <div class="sjx" @mousemove="moreData" @mouseout="hiddenData"></div>
        <div id="data" hidden = true @mousemove="moreData" @mouseout="hiddenData">
            <nav>
                <RouterLink to="/about">
                    <ul>
                        <li>全部</li>
                        <li>剧情</li>
                        <li>娱乐</li>
                        <li>科技</li>
                        <li>游戏</li>
                        <li>体育</li>
                        <li>动漫</li>
                        <li>少儿</li>
                        <li>综艺</li>
                        <li>美食</li>
                    </ul>
                </RouterLink>
            </nav>
        </div>
    </div>
</template>

<script setup>
    import { ref,onMounted } from 'vue'
    // onMounted(()=>{
    // })
    function moreData(){
        document.getElementById('data').hidden = false
        document.getElementById('more').style.color = "rgb(255, 89, 0)"
    }
    function hiddenData(){
        document.getElementById('data').hidden = true
        document.getElementById('more').style.color = "black"
    }
</script>

<style scoped>
a{
    color: white;
    position: relative;
    top: 200px;
    left: 20px;
    font-size: 20px;
}
.sjx{
    position: fixed;
    left: 365px;
    top: 30px;
    width: 40px;
    height: 40px;
}
#data{
    position: fixed;
    left: 230px;
    top: 60px;
    border-radius: 20px;
    width: 300px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.628);
}
#data nav{
    margin-top: -190px;
    margin-left: -20px;
}
#data li{
    font-size: 18px;
    list-style: none;
    float: left;
    margin-right: 26px;
    margin-bottom:40px ;
}
.more{
    position: fixed;
    top: 17px;
    left: 370px;
    font-size: 14px;
    color: black;
    font-weight: 700;
}
.first{
    background-image: url("https://pic3.zhimg.com/v2-bab469be47ac8ce21897173ee6bf5256_r.jpg?source=1940ef5c");
    background-size: cover;
    width: 100%;
    height: 500px;
}
</style>